<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java HTTP Client</title>
    <link rel="stylesheet" href="/web/style.css">
</head>
<body>
<div class="container" id="container">


    <div id="loading" style="
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #3498db;
    animation: spin 1s linear infinite;
"></div>


    <header>
        <div class="logo">HTTP客户端</div>
    </header>

    <div class="request-container">
        <div class="method-selector">
            <select id="method">
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="DELETE">DELETE</option>
                <option value="PATCH">PATCH</option>
            </select>
        </div>
        <div class="url-input">
            <input type="text" id="url" placeholder="输入请求URL" value="">
        </div>
        <div class="send-btn">
            <button id="send-btn">发送</button>
        </div>
    </div>

    <div class="request-options">
        <div class="tabs">
            <div class="tab active" data-tab="params">参数</div>
            <div class="tab" data-tab="headers">请求头</div>
            <div class="tab" data-tab="body">请求体</div>
        </div>

        <div class="tab-content active" id="params">
            <table class="params-table">
                <thead>
                <tr>
                    <th>键</th>
                    <th>值</th>
                    <th>描述</th>
                    <th></th>
                </tr>
                </thead>
                <tbody id="params-body">
                <tr>
                    <td><input type="text" placeholder="参数名"></td>
                    <td><input type="text" placeholder="参数值"></td>
                    <td><input type="text" placeholder="描述"></td>
                    <td>
                        <button class="remove-row">×</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="add-row" id="add-param">+ 添加参数</div>
        </div>

        <div class="tab-content" id="headers">
            <table class="params-table">
                <thead>
                <tr>
                    <th>键</th>
                    <th>值</th>
                    <th></th>
                </tr>
                </thead>
                <tbody id="headers-body">
                <tr>
                    <td><input type="text" placeholder="请求头名" value="User-Agent"></td>
                    <td><input type="text" placeholder="请求头值" value="PostmanRuntime/7.44.1"></td>
                    <td>
                        <button class="remove-row" onclick="this.closest('tr').remove()">×</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="text" placeholder="请求头名" value="Accept-Encoding"></td>
                    <td><input type="text" placeholder="请求头值" value="gzip, deflate, br"></td>
                    <td>
                        <button class="remove-row" onclick="this.closest('tr').remove()">×</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="text" placeholder="请求头名" value="Accept"></td>
                    <td><input type="text" placeholder="请求头值" value="*/*"></td>
                    <td>
                        <button class="remove-row" onclick="this.closest('tr').remove()">×</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="add-row" id="add-header">+ 添加请求头</div>
        </div>

        <div class="tab-content" id="body">
            <div class="body-options">
                <select id="body-type">
                    <option value="none">无</option>
                    <option value="raw" selected>raw</option>
                    <option value="form-data">form-data</option>
                    <option value="x-www-form-urlencoded">x-www-form-urlencoded</option>
                </select>
            </div>
            <div id="raw-body">
                <textarea id="body-content" rows="10" style="width: 100%; padding: 10px;"></textarea>
            </div>
            <div id="form-data-body" class="hidden">
                <table class="params-table">
                    <thead>
                    <tr>
                        <th>键</th>
                        <th>值</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody id="form-data-body-content">
                    <tr>
                        <td><input type="text" placeholder="键"></td>
                        <td><input type="text" placeholder="值"></td>
                        <td>
                            <button class="remove-row">×</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="add-row" id="add-form-data">+ 添加表单数据</div>
            </div>
        </div>
    </div>

    <div class="response-container">
        <div class="response-header">
            <div>
                <span class="status-code" id="status-code"></span>
                <span id="response-time"></span>
            </div>
            <div>
                <button id="copy-response">复制响应</button>
            </div>
        </div>

        <div class="response-tabs">
            <div class="response-tab active" data-response-tab="body">响应体</div>
            <div class="response-tab" data-response-tab="headers">响应头</div>
        </div>

        <div class="response-content">
            <pre id="response-body">发送请求以查看响应</pre>
            <pre id="response-headers" class="hidden"></pre>
        </div>
    </div>
</div>


<script src="/web/script.js"></script>
</body>
</html>